<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">

	</head>

	<body>
		<div class="col-lg-12" id="MatchNews">
			<ol class="breadcrumb">
				<li><i class="fa fa-home"></i>
					<a href="index.html">Home</a>
				</li>
				<li><i class=""></i>发布比赛资讯</li>
			</ol>

			<div class="mcomment">
				<h3 class="page-header"><i class=""></i>发布比赛资讯</h3>

				<table>

					<tr>
						<td>
							<label for="matchNewsTitle">资讯标题：</label>
						</td>
						<td>
							<input v-model="title" type="text" class="form-control" id="matchNewsTitle" placeholder="请输入比赛资讯标题" />
						</td>

					</tr>

					<tr>
						<td>&nbsp;</td>
					</tr>

					<tr>
						<td>
							<label for="matchType">比赛类型：</label>
						</td>
						<td>
							<select v-model="comId" class="form-control">
								<option v-for="type in types" v-bind:value="type.comId">
									{{type.laName}}
								</option>
							</select>
						</td>
					</tr>

					<tr>
						<td>&nbsp;</td>
					</tr>

					<tr>
						<td>
							<label for="matchNewsPic">图片上传：</label>
						</td>
						<td>
							<!--<input v-model="route" type="file" class="form-control" id="matchNewsPic" />-->
							<!--<div><a class="btn btn-primary" data-toggle="modal" data-target="#importImg">导入图片</a></div>-->
							<input id="matchNewsPic" v-show="fileupView" name="fileSelect" @change="update" ref="inputer" type="file" />

						</td>

						<!---------------------------------->
					</tr>

					<tr>
						<td>&nbsp;</td>
					</tr>

					<!--<tr>
						<td>
							<label for="matchUrl">比赛报名链接：</label>
						</td>
						<td>
							<input v-model="link1" type="text" class="form-control" id="matchUrl" placeholder="请输入比赛报名链接" />
						</td>

					</tr>-->
					<tr>
						<td>&nbsp;</td>
					</tr>

					<tr>
						<td colspan="2">
							<div class="form-group">
								<label for="matchNewsContent">资讯内容：</label>
								<!--<script v-model="content" id="publishMatchNews" name="content" type="text/plain">
								</script>-->
								<textarea id="text1"    class="form-control" style="display: none" >
								</textarea>
								<div id="meuen" class="toolbar">
								</div>
								<div style="padding: 5px 0; color: #ccc"></div>
								<div id="editor" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
									<p>请输入内容</p>
								</div>


							</div>

						</td>

					</tr>

				</table>

				<center>
					<div style="width: 50%;">
						<button @click="fileupdate" class="btn btn-default">发布</button>
						<button class="btn btn-default">取消</button>
					</div>
				</center>
			</div>

		</div>


		<script type="text/javascript">

			var url1 = 'http://donting.free.idcfengye.com';
			var vm = new Vue({
				el: '#MatchNews',
				data: {
					title: '', //标题
					types: [], // 类型列表
					comId: '1', //类型id

					content: '', //比赛内容

					fileupView: true,
				},
				methods: {
					publish: function() {


						//发送get请求
						axios.defaults.withCredentials = true;
						var x=document.getElementById("text1");

						alert(x.value);
						vm.content=x.value;
						console.log(vm.content)
						axios.post(url1 + '/information/add', {　　
								'title': vm.title, //标题
								'comId': vm.comId, //类型id
								'content': vm.content, //比赛内容

						}).then(function(response) {
							var rs = response.data;

							　　
							if(rs.code == 200) {
								alert("添加成功");
							} else {
								alert("添加失败"+rs.message);
							}

						}).catch(function(error) {　　
							alert("连接超时！");
						});

					},
					gettype: function() {
						//发送get请求
						axios.defaults.withCredentials = true;

						axios.get(url1 + '/type/alltypeNotPage', {　

						}).then(function(response) {
							var gf = response.data;
							if(gf.code == 200) {
								vm.types = gf.data;
								vm.comId = gf.data[0].comId;

							} else {
								alert("获取父类类型失败");
							}

						}).catch(function(error) {　　
							alert("fulei连接超时！");
						});

					},

					//文件上传
					update: function() {
						var inputDOM = this.$refs.inputer;
						// 通过DOM取文件数据
						this.file = inputDOM.files[0];
						console.log("inputDOM.files[0]:" + inputDOM.files[0]);
						if(inputDOM.files[0] === undefined) {
							this.fileName = '';
							this.fileSize = '';
							this.fileType = '';
						} else {
							this.fileName = this.file.name;
							//kb
							if(this.file.size / 1024 < 1000) {
								this.fileSize = (this.file.size / 1024).toFixed(2) + "kb";
							} else if(this.file.size / 1024 > 1000) {
								this.fileSize = ((this.file.size / 1024) / 1024).toFixed(2) + "MB";
							}
							this.fileType = this.file.type;
						}
					},

					//上传按钮的事件axios
					fileupdate: function() {
						var inputDOM = this.$refs.inputer;
						// 通过DOM取文件数据
						this.file = inputDOM.files[0];
						var formdata = new FormData();
						formdata.append('file', inputDOM.files[0]);

						axios({
								url: url1 + '/imgUp',
								method: 'post',
								data: formdata,
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded'
								}
							}).then(function(re) {
							console.log(vm.content);
								vm.publish();
								console.log(re);
							})
							.catch(function(err) {
								console.log(err);
							})
					}
					//文件上传end

				},
				mounted() {
					this.gettype();

					var E = window.wangEditor

					var editor =new E('#meuen', '#editor');
					var $text1 = $('#text1')
					editor.customConfig.withCredentials = true
					editor.customConfig.uploadFileName = 'file';
					editor.customConfig.uploadImgServer = url1+'/addEdImgUp'
					editor.customConfig.onchange = function (html) {
						// 监控变化，同步更新到 textarea
						$text1.val(html)
						console.log("更新...")
					}

					editor.create()

				}

			});
		</script>

	</body>

</html>